<template>
  <div class="add-dialog">
    <div class="dialog-content">
      <el-form
        ref="ruleFormRef"
        label-position="left"
        :model="formData"
        class="add-form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="是否公开">
          <el-switch
            v-model="formData.is_show"
            class="mb-2"
            active-text="私有"
            inactive-text="公开"
          />
        </el-form-item>
        <el-form-item label="文件名" prop="fileName">
          <el-input v-model="formData.fileName" />
        </el-form-item>

        <el-form-item label="分类">
          <el-select v-model="formData.type" placeholder="请选择文件类型" style="width: 100%">
            <el-option
              v-for="item in typeListData"
              :key="item.id"
              :label="item.type"
              :value="item.type"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="管理员">
          <el-select v-model="formData.user_id" placeholder="请选择管理员" style="width: 100%">
            <el-option
              v-for="item in userlistData"
              :key="item.id"
              :label="item.userName"
              :value="item.id"
            >
              <div class="person-list">
                <el-avatar size="small" :src="item.avatar" />
                <span class="name">{{ item.userName }}</span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="formData.descs" type="textarea" />
        </el-form-item>
      </el-form>
    </div>
  </div>
  <footer class="footer">
    <el-button class="btn" color="#6C52EA" @click="handleSubmit(ruleFormRef)">保存</el-button>
  </footer>
</template>

<script lang="ts" setup>
import { onMounted, computed, reactive, ref } from 'vue'
import { FormInstance, FormRules, ElMessage } from 'element-plus'
import { newDocumentData, getTypeList } from '@/apis/system/document'

import { userStore } from '@/store/user'
import { storeToRefs } from 'pinia'

const userData = userStore()
const { userlistData } = storeToRefs(userData)

/**
 * @desc:获取人员信息
 * @param {Array} search 搜索
 */
onMounted(async () => {
  await userData.getUserData(), ruleFormRef.value.resetFields()
})

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  }
})

const rules = reactive<FormRules>({
  fileName: [
    { required: true, message: '文件名不能为空', trigger: 'blur' },
    { min: 2, max: 10, message: '长度需要在2-20个字符', trigger: 'blur' }
  ]
})

/**
 *
 * @desc:获取登录用户信息
 */
const getUserInfo = computed(() => {
  return JSON.parse(localStorage.getItem('user') as string) || ''
})

const formData = reactive({
  is_show: '',
  fileName: '',
  type: '',
  user_id: '',
  show_department: '',
  descs: ''
})

/**
 * @desc: 获取分类
 */
let typeListData = ref()
const getData = () => {
  if (props.dialogVisible) {
    getTypeList().then((res) => {
      if (!res) return
      typeListData.value = res
    })
  }
}
getData()

/**
 * @desc: 提交保存
 *
 */
const emit = defineEmits(['dialogClose', 'dialogSave'])
const ruleFormRef = ref()
const handleSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      newDocumentData(formData)
        .then((res) => {
          if (!res) return
          emit('dialogSave')
          formEl.resetFields()
          ElMessage.success('创建成功')
        })
        .catch(() => {
          ElMessage('服务器内部错误！')
        })
    }
  })
}
</script>

<style lang="less" scoped>
.button {
  color: #6c52ea;
}
.button:hover {
  color: #6c52ea;
  border-color: #6c52ea;
  background-color: var(--el-button-hover-bg-color);
  outline: 0;
  opacity: 0.8;
}
.add-dialog {
  .dialog-content {
    .add-form {
      height: 280px;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 0 15%;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(220, 223, 230, 1);
    }
  }
}
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  padding-top: 10px;
  text-align: right;
  .btn {
    width: 150px;
    height: 48px;
    opacity: 1;
    border-radius: 4px;
    border: 1px solid rgba(220, 223, 230, 1);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 15px 61px 15px 61px;
  }
}
.el-select-dropdown__item {
  .person-list {
    display: flex !important;
    align-items: center;
    .name {
      padding-left: 10px;
    }
  }
}
</style>
